Introduction

The only thing more difficult than learning to make Joomla templates is writing a
tutorial that endeavors to teach a complete noobie how to do so for free. The difficulty in
writing this tutorial resides in the fact that teaching is easy to those who have the knack.
For the rest of us, teaching is a chore. The difficulty in learning to create a Joomla
template from scratch lies in the complexity of the information currently available. This
tutorial aims to rectify that situation. Sadly, it will not be able to cure my poor writing
skills. Hopefully you will survive my scribbles long enough to understand how it all
works.

This tutorial began as a thread on my web host’s forums which I shall now
shamelessly plug. http://www.BryanSoft.com. I wanted the thread to be something
that the reader could grow with and see my progress over time. However, the inherent
limitations of a forum were much too much to overcome. I have not given up on the
idea of writing a tutorial of this nature, and over the course of this document I will take
my best stab at doing it all over again with screenshots and hopefully some nerd humor
( I think nerd humor may be an oxymoron).

There are a few tools that you will need to get started:

• Graphic Design - Paint.Net can be found at http://www.getpaint.net

• WYSiWYG HTML - KompoZer can be found at www.KompoZer.org
NOTE: KompoZer is also available as a Portable Application at
www.PortableApps.com. The portable version of KompoZer will allow you to
edit your template on nearly any computer running Windows.
• Content Management System - Joomla 1.5 can be found at: www.joomla.org
• Joomla Template Snippet Library - JTT can be found in the Joomla extensions
directory at: http://extensions.joomla.org
• Lorem Ipsum Generator - I use www.lipsum.com to generate sample content for
my template until the PHP Joomla code makes the template dynamic.
• Any webhosting account with PHP v.5 or greater where you can install Joomla
Shameless Plug Alert: http://www.BryanSoft.com

By no means are these tools the absolute best way to go when building a Joomla
template and I am not trying to convert anyone. In fact, I do believe that there are much
better ways to go if money is no object. However, I chose to go this route because every
tutorial I read when learning this for myself was pricey when considering the webdev
tools required. Joomla itself and a very good many of the available templates and
extensions are free. There is no reason why there shouldn’t be a tutorial written so that a
noobie can follow along for free too. That being said, free software does come with
certain handicaps that we will discover along the way and find ways of overcoming them
as they rear their ugly heads.
What are Content Management Systems,
and more importantly, Why Joomla?

Content Management Systems (CMS) are the backbone of many news and e-
commerce sites that we all use. One of the most successful CMS driven websites is
Amazon.com. Now we can't exactly have Amazon.com's CMS, but that doesn't mean
that Content Management is beyond the reach of web admins with slightly less successful
business plans.

What makes these systems so attractive is the way they present new information.
Before CMS, web pages were static. Every time new information needed to be
presented, that information had to be built into a new page on a website. With the
advent of CMS, content could be dynamically generated and new information could be
presented on the fly. This is accomplished by splitting the site into three distinct pieces:
the wire frame, the style sheet, and the data. The wire frame is the basic information that
tells the web browser how to process the information it is getting. The wire frame in
PHP based CMSs, is found in the index.php file. The style sheet is a Cascading Style
Sheet (CSS) that defines the appearance of the page. Finally the database stores the data
that the CMS will present through the wire frame and style sheet. The advantage of
splitting the site into three distinct pieces is that the duties of each are confined within
themselves and can be more easily maintained or modified.

There are more Open Source CMSs than I care to consider. Thankfully, other
people have the time and determination to attempt to catalogue them.
http://php.OpenSourceCMS.com provides and extensive list of free CMS options listed
alphabetically. They have nearly one hundred options. The question is not where you
should start, but why I am a huge fan of Joomla!

Yes, it’s true. I am an unashamed Joomla fanboy. I have tried other CMS
systems, but nothing offered the wealth of plug-ins and extensions as those offered on the
Joomla web page. I was simply overwhelmed by the options available. Then you see the
forums where so much support is available. I have posted questions there and had
answers within hours. Basically, the price was right and the support structure was there to
support my first foray into CMS. Once I had my first Joomla installation up and running,
I was hooked. Setting up a site was so easy. Getting plug-ins and extensions working
was a breeze. I have never looked back. Since I am such a Joomla fanboy I would
suggest that it be your first choice for CMS too. Now that the question of why I chose
Joomla has been answered, we can move forward with the template tutorial.
Taking over the world
AKA: Devious Plan “A”

The first place to start in any webdev project is to have a good plan. In the case of
creating a template, the plan is, more often than not, actually a picture. In this case, I have
created what is possibly the most boring and plain picture possible. The point of this
tutorial is to teach you how to make a Joomla template; not a pretty Joomla template. You
can see the masterpiece for yourself in Figure 1.

Figure 1

As you will see, it is a very simple two column fixed width template with a header
image. You could also make a fixed length template, but your site would be
unnecessarily constrained. You can use the graphic design package of your choice to
make your really simple Joomla template. I used Paint.NET. It is a free graphic design
package. Just be aware that it does require the .NET framework to run.

As with any well organized webdev project, file organization is just as important
as having a plan. In the case of Joomla templating, the accepted file structure for
template construction is as follows:
 • TemplateTut (or the name of your template)
o CSS
o Images

See Figure 2 for a look at my file structure.

Figure 2

The template that we will be building together here will be a pure CSS driven
template. That means no tables. Tables belong in dining rooms and banquet halls; not in
your template. Since this template will be so simplistic, we will not have a bunch of
images to load. Really the only images we will need are the header image with possibly
one or two background images that should be around 1k in size. These small images will
not noticeably increase the template load time, though. The menu, along with the rest of
the site's content, will be dynamically generated by the CMS.

You will notice that the header image is surrounded by a thick black border;
however, we really only need three sides of the border in our header image. The left right
and top borders will need to be saved. The rest can be cropped off. The rest of the colors
and borders will be generated throughout the CSS file. So go ahead and crop out the
header image as I did in Figure 3
Figure 3

In the second section of this tutorial we discussed the question of “What are
Content Management Systems”. In that discussion, we covered the three basic pieces of
a CMS; the wire-frame, the styling, and the database. In this section we have discussed
the development of our plan and the organizational structure of the template. Now we
have a piece of the structure of the template we need to put it in its place. The wire
frame of our template (the index.php) will be in the root directory of our template (i.e.
...\TemplateTut\index.php), the CSS file will be in the CSS sub-folder, and the header
image we just cropped out of our mockup will go in the Images sub-folder.
Gold Diggers and Mozart
Using KompoZer

I am going to have to assume that you have already downloaded KompoZer and
delve into the more complicated part of building a Joomla template. Joomla templates
begin in much the same way as any static HTML page. Basically we are going to build
an HTML page with a linked CSS file and then add the PHP bits that make it work as a
template in Joomla.

To begin, we will need an index.php file in the Template Tut folder. Since
KompoZer doesn't officially support PHP files, we will have to trick it into doing what
we want. Open KompoZer. When you open KompoZer, you will be presented with a
new blank page that you will need to save as a PHP file. Click on File then "Save As".
In the Save As dialog box, you will notice that KompoZer wants to save everything as an
HTML file. In the “Save as Type” drop down menu, choose "All Files" as seen in
Figure 4. Now you can save as a PHP file. In order for this all to work properly, the
file must be named index.php. There are no exceptions to this that I am aware of, so just
do it and don't complain.

Figure 4
 Once your blank PHP file is saved, we can get started. In an earlier post, I said
that we would be making a purely CSS driven template which means NO TABLES. If
there are no tables, we must use CSS to create divisions in the page. I know that tables
are easy and many of you may have been using tables successfully for years, but there
are advantages to divs that tables cannot compare. Divs provide the possibility for
source ordering. Source ordering is important for SEO, but it is also important for
creating sites that are accessible to handicapped visitors who use screen readers. We
are not going to cover SEO or accessible website design in this tutorial, but I think we
can all agree that it is best to start off right than have to go back to be beginning again
when those issues become important.

One great thing about KompoZer is that it provides a CSS editor right there in its
user interface. Before we can get started with coding our index.php, we need to create
our divs in our CSS. Since there isn't a CSS file yet, we need to create one. The easiest
way to accomplish this is to open Wordpad and save the document to your
TemplateTut/CSS folder as TemplateCSS.css. Once you have your blank CSS file in the
CSS folder, you go back to KompoZer. In KompoZer's menu bar, you will see an icon
that looks kind of like a painter's palette. I have circled it in Figure 5. That is the menu
icon for the CSS editor. Click it and lets get started making our divs.

Figure 5
 When you open the CSS editor, you will see the CSS Stylesheets window. CSS is
a very versatile structure for changing the look of the content of your website. While it is
possible to use CSS right in the code of your index.php file, we want to keep our CSS file
as a separate file from the index.php. This allows us to easily modify the CSS without
having to look through all of the code in our index file. By default, the CSS Editor wants
to use an internal stylesheet. Refer to Figure 6 for a screenshot. There are two types of
stylesheets; internal and linked. What we want is called a "Linked Stylesheet". A linked
stylesheet is a stylesheet that is in a file separate from the PHP code. In the top left
corner of the CSS Stylesheets window, you will see another painter's palette icon. Click
it and you will see that there are several options to choose from. Since it is what we
want, a linked stylesheet will be the obvious choice. By this point, you may have noticed
that we already have a stylesheet; but it is an internal stylesheet. Feel free to delete the
internal stylesheet at will as we don’t need it. Deleting stylesheets is easy. Simply select
the unwanted stylesheet and click the red “X” icon in the menu bar. It will be the fourth
icon from the left.

Figure 6

Once we choose the linked stylesheet option, we will be presented with the New
Linked Stylesheet dialog. Once again look at Figure 6. Since we have already created a
blank CSS file, we will want to choose that file for ourselves by clicking on the "Choose
File" button. Once we have clicked on the choose file button we can surf our site structure
to the TemplateTut/CSS folder and select our TemplateCSS.css file. To make the linked
CSS file be linked in the index.php file, click the "Create Stylesheet" button.
 There is one quirky thing about KompoZer’s CSS editor that takes a little getting
used to that you will need to know now. KompoZer’s CSS editor does not save changes
to your CSS file until you click ok. If you click Cancel or the red “X” in the top right
corner or the Cancel button in the bottom right hand corner, all of your CSS work will be
lost. If you want to keep your changes and exit, always click the OK button. If, at some
point you want to delete a stylesheet or any single element of a stylesheet, select the sheet
or element in the "Sheets and Rules" panel and click the red x in the menu bar.

In order to create a new div in our stylesheet, we need to once again click on the
painter's palette icon and choose the Style Rule option. This will present us with a few
options as seen in Figure 7. A div is essentially an element with a specified ID attribute.
Conveniently for us, the CSS editor has included this option. It is the third one on the
list. When we select that option, the # sign appears in the text box below the options.
Enter the name of your first div. In the case of the most simple and boring Joomla
template possible, we will be naming the header as our first div. Once you have entered
the name of your first div, (i.e. #header), click the Create Style Rule button. You will
need to perform that step for each div you need for your site. In the case of our site, we
will be creating four divs and one style applied to all elements of a class:

body
#header
#container
#left
#right

When you are done creating your divs, it will look something like what I have attached in
Figure 8.

Figure 7
Figure 8

Now here we could just start styling our divs, but we wouldn't be able to see our
progress. However, if we take this moment in time to setup our divs in the index.php file
we will be able to see the changes happen as we make them. To exit the CSS editor and
return to KompoZer, click the OK button.

Finally we have reached the point where we can do some actual coding of our
Joomla template. The default view for KompoZer is the "Normal" view. To add the divs
to our source code, we will need to switch to the source tab at the bottom of the
KompoZer window as seen in Figure 9. The div tags will be located between the body
tags. For example:

Code:
<body>
<div id="header">
</div>
</body>
Figure 9

Inside those two lines of code between the body tags, we have just created the div
where our header image will be displayed. If we wanted to at this point, we could return
to Cascades and style the header div and begin to see some progress on our template.
However, while I've got you in the mood to make sweet code together we should just
finish out declaring our divs for one another in the index.php

One neat thing about divs is that we can nest one div within another div. We are
going to do just that by placing our left and right divs INSIDE the container div. This
technique would work with any div. To my knowledge, there is no limit on the number
of divs that can be nested in this way. Nesting divs is easy if you keep in mind the order
in which the divs should be closed. Check out the example:

Code:
<div id="header">
</div>
<div id="container">
<div id="left">
</div>
<div id="right">
</div>
</div>
 First we declared the header div; then closed it. Next we declared the container
div. However, since we want to nest the left and right divs INSIDE the container div, we
didn't close the container div. Instead, we declared the left div and closed it then declared
the right div and closed it. Since we declared the left and right divs and closed them
between the open and close div tags for the container div, the left and right divs are
INSIDE the container div. If you want to see how that looks, just click on the HTML
Tags tab at the bottom of the KompoZer window or take a look at Figure 10. You will
see five tags; the body tag and four divs. However, two of the divs will appear INSIDE
the borders of the container div.

Figure 10
Style
You’ll know when you’ve got it

As it stands right now, our Joomla template doesn't look like much. Essentially, it
is all substance and absolutely no style. That is where the stylesheet re-enters the picture.
If you recall, we created a linked stylesheet in the CSS editor and defined some style rules
that are our divs. However, we didn't apply any styling to any of our divs. That leaves
our template even more boring than our plan. We can't have that, now can we. First we'll
add just a touch of panache to our header div. Essentially all we will do to the header div
is add a background picture and set the dimensions of the div. The background picture is
our header image, and the dimensions of the div will be the exact same size as our
background image. This is the longest segment of this tutorial so if you want to take a
break, now would be the time to do it. Go ahead and stretch your legs, or continue if you
are a nerdy glutton for punishment.

If you haven't already done so, re-open KompoZer and open your index.php file.
Before we begin styling the divs, we will need some sample content in the left and right
divs. This content will only be filler text and we will be deleting it when we start
Joomlatizing the template. However, if we were to continue without adding any static
sample content to the divs we wouldn’t be able to view our changes as they occur. Our
changes would take place, but our preview would be the header image and nothing else.
For this, I will use http://www.lipsum.com to generate sample content for my template
until the PHP Joomla code makes the template dynamic. The site itself is pretty self
explanatory. If you choose not to use Lorem Ipsum text, you can use any plain text placed
between paragraph tags in the div where you want the text to appear. You will need to be
in the source tab of KompoZer to add the sample text to the divs. The left div will
contain our menu and the right div will be the body of our page where the actual content
will be displayed. Now that we have a very raw template with some sample content we
can get started styling our divs. Open the CSS editor so that we can start applying our
styles.

We will click on the header div in the Sheets and rules panel of the CSS editor to
add a background image to the header div. Next we will look at the panel on the right
hand side of the CSS editor. We haven't spent any quality time there yet, but from this
point until we begin adding the PHP code that makes a template a Joomla template we
will be here most of the time. If you noticed the tabs in the right hand panel in the CSS
editor, you probably clicked on a few to see what they held. The tab labels are pretty
descriptive. If you want to control the background appearance of a div, you would define
those parameters in the Background tab. Let’s go there now and define the background
image of the header div. In the background tab, we could define a color but in this case
we want to assign an image to the background. Click the choose file button and surf on
over to the Template Tut/Images folder and select the header.jpg file that we cropped out
of the plan earlier in the tutorial. That will be the header image for our template. Since
our div is going to be resized to be exactly the dimensions of the header image, we don't
want the image to be "tiled". Now the image is in the header div, but we can't see all of it
because the header div isn't sized properly.
 Move over to the Box tab and look for the Width and Height text boxes to re-size
the div. There we can set the dimensions of the div in several different units of measure.
Since pictures are measured in pixels, we will be setting our div dimensions the same
way. The header image is 754px * 179px. Set the width of your div to 754px and the
height to 179px. If you click on OK to exit the CSS editor, you will see that the header
div now has a header image and is sized to perfectly fit the image. As you can see in
Figure 11, the header div is now styled.

If we preview what we have so far, we see that the template is positioned off
center on the left hand side of the page. However, it is not a situation without a remedy,
but the two major web browsers handle centering the template on the page in different
ways. Contrary to what a person may assume; Microsoft’s Internet Explorer doesn’t
handle this task in a standards compliant way like most other web browsers. In order to
“fix” this centering issue, we will have to fix it using both a compliant method and a non-
compliant method.

Figure 11

Since Internet Explorer doesn’t properly interpret CSS we will have to trick it into
working properly. Open the CSS editor and we will style the body tag. The fix is quite
easy for IE. Open the CSS editor to style the body and select the “Text” tag and set the
text alignment to “Center”. Now when you preview the template in IE you will notice
that the template is now centered, but all of the text is center aligned as well. We will re-
align the text as we style each of our divs.
 To center the template as it is displayed in Firefox, we will use the standards
compliant method. The two methods do not conflict with one another so there will be no
further worries about having our template display properly once the IE patch and the CSS
standards compliant method are applied. Re-enter the CSS editor and we will be styling
the “header” div and the “container” div by setting the left and right margins in the “Box”
tab to “Auto”. Once that is done for the header and container divs, preview it in Firefox
to bask in the glow of a job well done and prepare to begin styling our nested divs.

In the header div, we used a background image. The background image had a
thick black border around the left, top, and right, but no border along the bottom. To
recreate that border and the remaining borders as seen in our plan, we will style the
container div to have a thick black border. There is a selection of choices here. We can
set up the borders to be the same on all four sides or we can have different line styles,
weights, and colors depending on the side of the div and our personal preferences. In this
case our preference is that the border to be solid and black with a line weight of 2 pixels.
We could make the border wrap all the way around the Container div, but since we will
be applying a background image to the container that includes the border, we will only
apply borders to the top and bottom of the Container. Re-enter the CSS editor and select
the container style rule in the left hand pane of the CSS editor. Now choose the
“Borders” tab in the right hand pane of the CSS editor and setup your borders as
described. We will also want to set the fixed width of the Container in the Box tab of the
CSS editor at the same width as our Header, which if you recall, was 754 pixels. Click
OK to exit the CSS editor and you will see that now the header image appears the same as
it does in our plan with a border around all four sides.

Next we add the simple background image. Basically, we could use CSS to
define the background color of our nested divs. This would help keep our template size
down, but the template would eventually begin to show some white space as we massage
the size of the divs to suit our needs. In order to do this, we need a very small section of
the plan. Crop out a one pixel tall strip of the plan that is the complete width of the plan
and save it to the images folder of the template. Now define that image as the
background of the container image.

Now that our container is styled, we can move on to the divs nested within the
container div. The left div will contain our menu and the right div will be the body of our
page where the actual content will be displayed. We will start with the left div. Re-enter
the CSS editor and select the left style rule to begin.

As you will see in Figure 12, our plan shows a simple two column fixed width
template. In order to make a two column template we defined two divs in our wire frame
where we will display the content assigned to each of those columns. The left div will be
the area where Joomla will display its menu. Since simple menu systems do not require a
lot of space, we will style this div as a narrow strip down the left hand side like we
originally planned.
Figure 12

Let’s set up the size and positioning of the left div first by re-entering the CSS
editor, selecting the left div and choosing the Box tab. The width of our menu bar in our
plan is 176 pixels if you include the border. However, we created our border with CSS
when we styled the container. With that consideration, we need to style the left div at
174 pixels wide. We also need to consider that the current position of the left div covers
up the border of the Container div with text from the left div. To solve this problem we
need to add a two pixel margin which will move the left div two pixels to the right and
reveal the border that was lurking beneath it. We also need to define the text color of the
menu items in the left div. Each of the menu items in the div are actually links. Links
can be styled in much the same way as any other item on your page. However, since we
only want to style the links in the left div, we will need to create special styling rules for
the affected links.

As you can see in Figure 12, the menu links are a light blue Arial Black font at about 15
points in size. We can style all of these features, but we need to create new style rules
that define the style of links in the left div. To do this, click on the small painter’s palette
in the top left corner of the CSS editor and select “Style Rule” to create a new style rule.
Since styling links is not a basic CSS rule, we will need to create a custom rule for each
state of a link. Select the “Custom Style Rule” radio button to begin. In the text box
below, click the down arrow to select “a:active”. Once it is selected we will need to
make sure that this style rule affects only links in the left div. To do this, simply insert
“#left” before “a:active”. The rule for active links will then be specifically for links in the
left div.
 Enter the various tabs in the “#left a:active” style rule to style the links in a manner
you find pleasing. You will need to keep in mind that since the background to the div is a
dark color, you may need to choose a light color for the text so that it is easily read. Once
the new style rule is completed, remember that you must do the same thing for each of the
other three link states: a:link, a:hover, and a:visited. If you don’t, the link will revert to its
default style when the link state changes. There is just one more element to style in the
left div, but we will get to that after a brief interruption in the form of styling the right div.

Follow similar guidelines for defining the CSS elements of the left div for the
right. Since our fixed width of the template is 754 pixels and we want our right div to fill
in the empty space on the right hand side of our template, we will need to define our right
div to be 578 pixels wide. This will use all of the available space for our right div. That
element will be a good starting place for styling our right div in the Box tab of the CSS
editor. If you preview your template now, you will notice that the right div shows up
below our left div. The reason for this is that CSS wants to display everything in a
particular hierarchy. Specifically, if one div is declared before another in the source of
our wire frame; it will display above the divs declared below it in the source. This is
easily resolved. Simply return to styling the left div and enter the Box tab. There set the
float option for the left div to be a left float. Now CSS knows that the empty space to the
right of the left div is available for use and will allow content from the right div to flow
around the left. However our content now flows around the left div as seen in Figure 13.

Figure 13
 In some situations that effect may be desirable, but in our template plan we want
to see the left hand div extend for the full length of the page. What we need to do is
define a left hand margin to the right div so that the content of the right div clears the left
div. Since we want the content of the right hand div to clear the content of the left div,
we will require a minimum margin of 176 pixels to be set in the Box tab of the CSS
editor. Now our content clears the left hand div, but it completely fills up the empty
space. This may not be desirable depending on your design preferences. I prefer to show
a little skin around the content. It just looks better to have a little empty space around the
edges. To accomplish this, I add a little extra margin and set the margin to 185 pixels to
add that pleasant empty space. However, that shifts the entire div to the right beyond the
fixed width of the template. Decrease the width of the div in the Box tab of the CSS
editor to bring the div to size. Our left and right divs have one more bit of styling to have
defined before we can call it styled. If you notice that all of the text is center aligned in
the left and right divs; that is a side effect of the non-standard CSS styling we applied to
fix the template centering issue in IE. To fix this, simply set the text align in each div to
align to the left. Now you can preview your work in Firefox or IE to see your
handiwork.

What we now have is an HTML template that will function as a Joomla template
once the PHP bits are added. Go ahead and play with the styling to see if there are any
extra little bits of CSS that you want to see in your template. CSS is a very versatile
framework for styling the content of your site and is better in some ways than using
rollover gifs or Flash to get graphic effects on your site because it keeps the overall file
size of your template low and the site load time low too. Once you are done tweaking
your CSS styling of your template we be finished with KompoZer and begin adding the
bits that make this template a Joomla template. We’re almost there!
Joomlatizing Your Template
Or “Let there be Joomla!!!!”

In the introduction to this tutorial, we discussed the fact that free software often
comes with functional limitations not found in commercial alternatives. If you recall, we
saw one limitation in KompoZer in that it doesn’t natively support PHP files. It is here
that we find another limitation of KompoZer. KompoZer, in an effort to make HTML
easy, manages the header information of your page for you. While this is a very useful
option for beginners who only wish to use HTML, it can’t be turned off for those of us
who wish to do a bit more than HTML. If we were to change the header, KompoZer
would automatically reverse the change. Since we do need to change the header, it is
here that we bid a fond farewell to KompoZer. She served us well. Since we have
abandoned our trusty KompoZer, you may be wondering how we will continue without
an HTML editor. We’ll simply use a text editor like Wordpad. I know it seems like an
awful step backward, but it really is the best way to move forward while keeping our
Joomla template project free. Open your template folder and right click on the index.php
file. Select the “Open with . . .” option, and select “Wordpad” from the pop out menu.
Once you have opened our wire-frame in Wordpad, you will notice that the source is
simply bloated. The bloat comes in the form of the sample content we included. Since
the sample content is only a sample, and Joomla will be dynamically providing the
content of our site; we can delete it. Delete the paragraph tags and everything between
them. Now our wire-frame looks like this:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html><head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-

type">
<title>TemplateTut</title>

<link rel="stylesheet" href="CSS/TemplateCSS.css" type="text/css">

</head><body>
<div style="text-align: center;" id="header">
</div>

<div style="text-align: center;" id="container">

<div id="left">
</div>
<div id="right">
</div>
</div>

</body></html>
 If you haven’t already gotten the Joomla 1.5 Template Toolbar yet, you will need
to get it because you won’t be able to move forward without it. You can get it here:
http://extensions.joomla.org. The version I used in writing this tutorial was version
0.8.4. You will also need to have the latest version of the .NET Framework from
Microsoft. The Joomla 1.5 Template Toolbar (JTT) is a code snippet program. It places
a selection of code on your clipboard so that you can paste it in your code. Open JTT,
your index.php file in Wordpad, and lets get started. You can see the JTT user interface
in Figure 14.

Figure 14

Click on the “Insert Module” button and you will see that there are loads of
options from which to choose. The first bit that we want to select is the “Header”. Once
you have it, you can paste it over the header information of your index.php file. Your
index.php file will now look like this:

Code:
<?php

/*
*
* Brief Info
*
*/

defined( '_JEXEC' ) or die( 'Access to this location is RESTRICTED.' );

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="templates/_system/css/general.css"

type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template
?>/css/template.css" type="text/css" />

</head>

<body>
<div style="text-align: center;" id="header">
</div>

<div style="text-align: center;" id="container">

<div id="left">
</div>
<div id="right">
</div>
</div>

</body></html>
<div style="text-align: center;" id="container">
<div id="left">
</div>
<div id="right">
</div>
</div>

</body>
</html>

The header information is the part of the index.php file that tells a web browser
how it should interpret the code in the body. In this case, the header file tells the browser
that it is a PHP file based on XHTML 1.0 Transitional. As in any code snippet library,
the default code is not always going to be exactly what you want and you may need to
either modify your site to suit the code, or modify the code to suit your site. In this case,
the code snippet includes links to two CSS files. Since we only have one CSS file, we are
going to delete the extra one and your code will now look something like this:

Code:
<?php

/*
*
* Brief Info
*
*/

defined( '_JEXEC' ) or die( 'Access to this location is RESTRICTED.' );

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this-
>language; ?>" lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="templates/<?php echo $this->template
?>/css/template.css" type="text/css" />

</head>

<body>

<div style="text-align: center;" id="header">

</div>

<div style="text-align: center;" id="container">

<div id="left">
</div>
<div id="right">
</div>
</div>

</body></html>
<div style="text-align: center;" id="container">
<div id="left">
</div>
<div id="right">
</div>
</div>

</body>
</html>

Now that the header is set up, we can set up the code for our divs. We will be
setting up a simple module position in the left div, and a simple component position in
the right div. Click on “Insert Module” again and choose “Left (Simple)”. You will
want to paste this bit of code between the div tags for the left div. It should look
something like this:

Code:
<div id="left">
<jdoc:include type="modules" name="left" style="" />
</div>

You will want to follow the same procedure to paste the code for the right div,
except this time you will choose “Main Body”. Your code will look like this:

Code:
<div id="right">
<?php if($this->params->get('showComponent')) : ?>
<jdoc:include type="component" />
<?php endif; ?>
</div>
 However, we are going to delete some of it because our template is super simple
and the first and last lines of the code are not necessary. If we were going to create a
more complex template, we may want to keep the code depending on the required
complexity of the site. However since we really only want to make a very simple
template that works; the extra code will only serve to make things more complicated. In
the end, our code should look like this:

Code:
<div id="right">
<jdoc:include type="component" />
</div>

It may be a bit hard to believe, but that is all the code that is absolutely necessary
for a Joomla template to work. Next let’s work on our delivery.
It’s not Pizza Hut . . .
but it is delivery.

Every Joomla template is wrapped up in a zip file. Inside that zip file are all of
the folders and files that make up your Joomla template. There is one required file that
we have not yet discussed. The XML file is a file that tells Joomla what type of file is to
be installed. Essentially it describes the template to Joomla. Fortunately, JTT offers a
solution for that too. Click the “XML Editor” button to open the XML Editor. See
Figure 15.

Figure 15

Select all of the files in the Template Files section then click on the “Add Files”
button. Surf to the folder where the TemplateTut folder is located and click OK. The
XML Editor in JTT will scan the folder and add the files and their file structure and add
them in the Template Files section. Now fill in the blanks in the Template Info section of
the XML Editor. Now that the XML file is complete, click create and save it in the
TemplateTut folder. The file structure of your first Joomla template is complete. All that
remains is to Zip the contents of the TemplateTut folder and install.
Note from the author:
While this Joomla template is very simple, it should serve as a basis for your
continued learning regarding Joomla templating. This tutorial was written with the focus
of using free software in order to make Joomla templating accessible to everyone who
has a MS Windows XP or higher based computer. It is my sincere hope that you have
learned something worthy of sharing with a like minded friend.

I would like to thank Pop for proof reading this and turning me on to Cascading
Style Sheets. You aren’t a Joomla fanboy yet, but I’m working on converting you. Big
thanks go to S-Fraz for being my guinea pig and testing the tutorial. Last but not least, I
will thank my web host with one more shameless plug http://www.BryanSoft.com.

Happy Joomlaing!
wjp